<template>
  <div>
    <hd-tab :tabs="tabs"></hd-tab>
    <el-card :body-style="{ padding: '10px' }" class="box-card"
             shadow="never"
    >
      <div class=" my-1 clearfix flex justify-between items-center border-bottom border-b-2">
        <span>订单列表</span>
        <el-input
            v-model="keyword"
            placeholder="如：'毛肚'或'md'"
            size="small"
            style="float: right;width:200px; padding: 3px 0"
            @change="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table
          :data="orders.data"
          border
          empty-text
          size="mini"
          style="width: 100%">
        <el-table-column
            label="id"
            prop="id"
            width="180">
        </el-table-column>
        <el-table-column
            label="名称"
            prop="name"
            width="180">
        </el-table-column>
        <el-table-column
            label="单位"
            prop="unit">
        </el-table-column>
        <el-table-column
            #default="{row:order}"
            label="描述"
        >
          {{ order.description|ellipsis_Title }}
        </el-table-column>
        <el-table-column
            #default="{row:order}"
            align="center"
            label="预览图"
        >
          <el-popover
              v-if="order.image"
              :content="order.name"
              class="flex justify-center"
              height="200"
              placement="right-end"
              trigger="hover" width="200">
            <img slot="reference" :src="order.image" class="w-8 h-8 object-cover text-center"/>
            <el-image
                :src="order.image"
                fit="contain"
            >
            </el-image>

          </el-popover>

        </el-table-column>
        <el-table-column
            #default="{row:order}"
            label="创建时间">
          {{ order.created_at | dateFormat }}
        </el-table-column>
        <el-table-column
            #default="{row:order}"
            label="修改时间">
          {{ order.updated_at | dateFormat }}
        </el-table-column>
        <el-table-column
            label="分类"
            prop="category_name">
        </el-table-column>
        <el-table-column
            label="价格(元)"
            prop="perprice">
        </el-table-column>
        <el-table-column
            #default="{row:order}"
            label="操作"
        >
          <el-button-group>
            <el-button size="mini" type="success" @click="edit(order)">
              <i class="el-icon-edit"></i>编辑
            </el-button>
            <el-button size="mini" type="danger" @click="del(order)">
              <i class="el-icon-delete"></i>删除
            </el-button>
          </el-button-group>
        </el-table-column>

      </el-table>

      <div class="block">
        <el-pagination
            v-if="orders.meta"
            :current-page="orders.meta.current_page"
            :page-size="10"
            :total="orders.meta.total"
            background
            layout="total,prev, pager, next"
            @current-change="page"
        >
        </el-pagination>
      </div>


    </el-card>
  </div>
</template>

<script>
import tabs from './tabs'

export default {
  data() {
    return {
      tabs,
      orders: [],
      keyword: ''
    }
  },
  created() {
    this.load();
  },
  methods: {
    async load() {
      this.orders = await this.axios.get('admin/order');
    },
    async page(page = 1) {
      let url = `admin/order?page=${page}`
      this.orders = await this.axios.get(url);
    },
    edit(order) {
      this.$router.push({name: 'admin.order.edit', params: {id: order.id}})
    },
    del(order) {
      this.$confirm(`确定删除【${order.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(async () => {
        await axios.delete(`admin/order/${order.id}`)
        await this.load()
      })
    },
    async search() {
      if (this.keyword) {
        this.orders = await this.axios.post(`admin/order/search`, {keyword: this.keyword})
      } else {
        await this.load()
      }
    }
  }
}
</script>

<style scoped>

</style>